<template>
<div class="page-container">
    <div class="toolbar">
        <el-row>
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm" :rules="dataFormRules" :disabled="this.$route.query.disabled" class="form">
                        <el-row style="margin-top: -20px;">
                            <el-divider content-position="center">
                                <span style="font-size:16px;font-weight:800">基本信息</span>
                            </el-divider>
                             <el-form-item label="名称：" prop="name" v-show="subscript==1">
                                    <el-input v-model="dataForm.name" placeholder="请输入名称"></el-input>
                            </el-form-item>
                            <el-form-item label="积分卡类型" prop="type" v-show="subscript==1">
                                <el-select v-model="dataForm.type" clearable placeholder="请选择积分卡类型">
                                    <el-option label="权益卡" value="1"></el-option>
                                    <el-option label="海星卡" value="2"></el-option>
                                    <el-option label="定制卡" value="3"></el-option>
                                    <el-option label="贵宾卡" value="4"></el-option>
                                    <el-option label="智慧整套卡" value="5"></el-option>
                                    <el-option label="城市定制卡" value="6"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="采购类型" prop="purchaseType" v-show="subscript==1">
                                <el-select v-model="dataForm.purchaseType" clearable placeholder="请选择积分卡类型">
                                    <el-option label="中心采购" value="1"></el-option>
                                    <el-option label="产品线采购" value="2"></el-option>
                                    <el-option label="渠道采购" value="3"></el-option>
                                    <el-option label="平台采购" value="4"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="平台" prop="firstDemandCode" v-show="subscript==1">
                                <el-select v-model="dataForm.firstDemandCode" clearable placeholder="请选择平台">
                                    <el-option v-for="(item,index) in platformList" :label="item.name" :value="item.code" :key="index">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="有效期" prop="expiryTime" v-show="subscript==1">
                                <el-date-picker v-model="dataForm.expiryTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="接口校验卡片" prop="isInterfaceVarify" v-show="subscript==1">
                                <el-select v-model="dataForm.isInterfaceVarify" clearable placeholder="请选择积分卡类型">
                                    <el-option label="是" :value="1"></el-option>
                                    <el-option label="否" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="请选择图片" prop="img1" v-show="subscript==1">
                                <el-upload :action="imgUpload" list-type="picture-card" :on-success="handlePicSuccess" v-model="dataForm.img1" :on-exceed="handleExceed" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" :on-remove="handlePicRemove" :limit="picLimit" style="float:left" ref="pic_upload" :file-list="picList">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="请选择图片" prop="img2" v-show="subscript==1">
                                <el-upload :action="imgUpload" list-type="picture-card" :on-success="handlePicSuccess2" v-model="dataForm.img2" :on-exceed="handleExceed" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" :on-remove="handlePicRemove2" :limit="picLimit" style="float:left" ref="pic_upload" :file-list="picList2">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="请选择图片" prop="img3" v-show="subscript==1">
                                <el-upload :action="imgUpload" list-type="picture-card" :on-success="handlePicSuccess3" v-model="dataForm.img3" :on-exceed="handleExceed" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" :on-remove="handlePicRemove3" :limit="picLimit" style="float:left" ref="pic_upload" :file-list="picList3">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                              <el-form-item label="申请原因" prop="applyReason" v-show="subscript==1">
                                <el-input v-model="dataForm.applyReason" placeholder="请输入" type="textarea"></el-input>
                            </el-form-item>
                        </el-row>
                    <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm" :rules="dataFormRules" :disabled="!this.$route.query.add" class="form" v-show="subscript==2">
                        <div style="margin-top: -20px;padding:10px" v-for="(item,index) in dataForm.quantity" :key="index">
                            <el-form-item label="积分卡数量：">
                                    <el-input-number v-model="item.totalNum" :min="1"></el-input-number>
                            </el-form-item>
                            <el-form-item label="积分卡面额">
                              <el-input-number v-model="item.pointCardLimit" :min="100"></el-input-number>
                            </el-form-item>
                            <el-button type="primary" size="small" @click="dataForm.quantity.splice(index,1)" v-if="$route.query.add==true">删除</el-button>
                        </div>
                        <el-button type="primary" size="small" @click="dataForm.quantity.push({totalNum:1,pointCardLimit: 100})" v-if="this.$route.query.add==true">添加</el-button>
                    </el-form>
                    </el-form>
                      <div class="tool-wrap">
                        <div class="left-area">
                            <el-button-group>
                                <el-button type="primary" size="small" @click="up()" v-show="subscript==1">下一步</el-button>
                                <el-button type="primary" size="small" @click="subscript=subscript-1" v-show="subscript>1">上一步</el-button>
                                <el-button type="primary" size="small" @click="submitForm" v-show="subscript==2 &&this.$route.query.disabled==false">保存</el-button>
                                <el-button type="primary" size="small" @click="$router.push({path:'/Pages/Point/ConfPointCardApplyList'})">取消</el-button>
                            </el-button-group>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';
import {
    mapState
} from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from 'v-distpicker';
import elTree from '@/views/tree/src/tree.vue'

//二.数据输出区
export default {

    //2.1 注册组件
    components: {
        jicTable,
        ThemePicker,
        LangSelector,
        VDistpicker,
        elTree,
    },

    //2.2 数据初始化区
    data() {
        return {
            picList: [], //存储图片路劲
            picList2: [],
            picList3: [],
          
            subscript: 1,          
            picLimit: 1, //图片最多可以添加多少个
            imgUpload: this.utils.imgUploadUrl,
            //2.2.1 公共数据初始化
            searchSize: 'mini',
            // 2.2.2 form 表单数据初始化 
            dataForm: {
                id: null,
                code: null,
                name: null,
                type: "1",
                purchaseType: "1",
                firstDemandCode: null,
                secondDemandId: null,
                expiryTime: null,
                totalNum: null,
                frozenNum: null,
                leftNum: null,
                pointCardLimit: null,
                totalPoint: null,
                isInterfaceVarify: 1,
                img1: null,
                img2: null,
                img3: null,
                applyReason: null,
                auditId: null,
                createTime: null,
                updateTime: null,
                creator: null,
                updater: null,
                sts: null,
                quantity: [{
                    totalNum:1,
                    pointCardLimit: 100
                }],
            },
            platformList: [], //平台id
            departmentList: [], //部门id
            platformListAll: [], //所有平台id
            //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
            dataFormRules: {
                code: [{
                        required: true,
                        message: "请输入积分卡申请编码",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                name: [{
                        required: true,
                        message: "请输入名称",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 10 个字符",
                        trigger: "blur"
                    },
                ],
                type: [{
                    required: true,
                    message: "请输入选择卡类型",
                    trigger: "blur"
                }],
                purchaseType: [{
                    required: true,
                    message: "请选择采购类型",
                    trigger: "blur"
                }],
                firstDemandCode: [{
                    required: true,
                    message: "请输入一级需求ID",
                    trigger: "blur"
                }],
                secondDemandId: [{
                    required: true,
                    message: "请输入二级需求ID",
                    trigger: "blur"
                }],
                expiryTime: [{
                    required: true,
                    message: "请选择有效期",
                    trigger: "blur"
                }],
                totalNum: [{
                    required: true,
                    message: "请输入批次开卡数量",
                    trigger: "blur"
                }],
                frozenNum: [{
                    required: true,
                    message: "请输入冻结数量",
                    trigger: "blur"
                }],
                leftNum: [{
                        required: true,
                        message: "请输入剩余数量",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 10,
                        message: "长度在 1 到 10 个字符",
                        trigger: "blur"
                    },
                ],
                pointCardLimit: [{
                    required: true,
                    message: "请输入积分卡面值",
                    trigger: "blur"
                }],
                totalPoint: [{
                    required: true,
                    message: "请输入总积分",
                    trigger: "blur"
                }],
                isInterfaceVarify: [{
                    required: true,
                    message: "请选择是否接口校验卡片",
                    trigger: "blur"
                }],
                img1: [{
                    required: true,
                    message: "请选择图片1",
                    trigger: "blur"
                }],
                img2: [{
                    required: true,
                    message: "请输入图片2",
                    trigger: "blur"
                }],
                img3: [{
                    required: true,
                    message: "请输入图片3",
                    trigger: "blur"
                }],
                applyReason: [{
                        required: true,
                        message: "请输入申请原因",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 100,
                        message: "长度在 1 到 100 个字符",
                        trigger: "blur"
                    },
                ],
                auditId: [{
                        required: true,
                        message: "请输入审批人ID",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                createTime: [{
                        required: true,
                        message: "请输入创建时间",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                updateTime: [{
                        required: true,
                        message: "请输入更新时间",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                img1: [{
                    required: true,
                    message: "请选择图片1",
                    trigger: "blur"
                }],
                img2: [{
                    required: true,
                    message: "请选择图片2",
                    trigger: "blur"
                }],
                img3: [{
                    required: true,
                    message: "请选择图片3",
                    trigger: "blur"
                }],
                creator: [{
                        required: true,
                        message: "请输入创建用户",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                updater: [{
                        required: true,
                        message: "请输入更新用户",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                sts: [{
                    required: true,
                    message: "请选择状态",
                    trigger: "blur"
                }],
            },
            //dialogVisible: false, //// 是否显示弹窗内容;
            //editDialogVisible1: false,//// 是否可编辑弹窗内容;
            //editLoading: false,////是否显示加载时动画效果;

        } //return 完结;
    }, //data()方法 完结;
    watch: {
        'dataForm.img1'(newVal, OblVal) {
            if (newVal != null || newVal != undefined) {
                let obj = new Object();
                obj.url = newVal;
                this.picList.push(obj);
            }
        },
        'dataForm.img2'(newVal, OblVal) {
            if (newVal != null || newVal != undefined) {
                let obj = new Object();
                obj.url = newVal;
                this.picList2.push(obj);
            }
        },
        'dataForm.img3'(newVal, OblVal) {
            if (newVal != null || newVal != undefined) {
                let obj = new Object();
                obj.url = newVal;
                this.picList3.push(obj);
            }
        },
    },

    //2.3 Vue 方法区
    methods: {
        up(){
            let this_ = this;
            this_.$refs.dataForm.validate(valid => {
                if(valid){
                    this_.subscript++;                    
                }
            })
        },
        getPlatFormL() {
            var this_ = this;
            this.utils.request.findConfPlatform({}, function (res) {
                if (res.code === "0000") {
                    this_.platformList = res.data;
                } else {
                    this_.platformList = [];
                }
            })
        },
       
        dateTime(){
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24*365);
            this.dataForm.expiryTime=date;
        },
        // logo上传
        handlePicSuccess: function (res, file) {
            if (res.code == "0000") {
                this.dataForm.img1 = res.data.imgUrl;
                let imgUrl = {};
                imgUrl.url = res.data.imgUrl;
            }
        },
        handlePicSuccess2: function (res, file) {
            if (res.code == "0000") {
                this.dataForm.img2 = res.data.imgUrl;
                let imgUrl = {};
                imgUrl.url = res.data.imgUrl;
            }
        },
        handlePicSuccess3: function (res, file) {
            if (res.code == "0000") {
                this.dataForm.img3 = res.data.imgUrl;
                let imgUrl = {};
                imgUrl.url = res.data.imgUrl;
            }
        },
        //文件上传数量限制
        handleExceed: function () {
            this.$alert("每个图片框最多上传1张图片", "警告", {
                confirmButtonText: "确定"
            });
        },
        //2.3.1 公共方法区

        //2.请求列表数据
        getDetail() {
            let this_ = this;
            if (this.$route.query != null && this.$route.query.id != null && this.$route.query.id != '' && this.$route.query.id != 'null' && this.$route.query.id != "undefined") {
                let params = {};
                params.id = this.$route.query.id;
                this.utils.request.getConfPointCardApplyDetail(params, function (res) {
                    if (res.code === "0000") {
                        this_.dataForm = res.data;
                    } else {
                        this_.$message({
                            message: "操作失败, " + data.msg,
                            type: "error"
                        });
                    }
                });
            }
        },
        handlePicRemove(file, picList) {
            if (picList && picList.length == 0) {
                this.dataForm.img1 = null;
            }
            this.picList = picList
        },
        handlePicRemove2(file, picList) {
            if (picList && picList.length == 0) {
                this.dataForm.img2 = null;
            }
            this.picList2 = picList
        },
        handlePicRemove3(file, picList) {
            if (picList && picList.length == 0) {
                this.dataForm.img3 = null;
            }
            this.picList3 = picList
        },
        addQuantity(){
            this.quantity.push({});
        },

        submitForm: function () {
            let this_ = this;
            this_.$refs.dataForm.validate(valid => {
                if (valid) {
                    var date = new Date();
                    if (this_.dataForm.expiryTime < date) {
                        this_.$message({
                            showClose: true,
                            message: '有效期不能小于当前日期',
                            type: 'error'
                        });
                        return;
                    }
                    if(this_.dataForm.totalNum>15000){
                          this_.$message({
                            showClose: true,
                            message: '最大数量不能超过15000张积分卡',
                            type: 'error'
                        });
                        return;
                    }
                    this_.$confirm("确认提交吗？", "提示", {}).then(() => {
                        this_.editLoading = true;
                        let params = this.dataForm;
                        this_.utils.request.saveConfPointCardApply(params, function (res) {
                            if (res.code === "0000") {
                                this_.$message({
                                    message: "操作成功",
                                    type: "success"
                                });
                            } else {
                                this_.$message({
                                    message: "操作失败",
                                    type: "error"
                                });
                            }
                        });
                        this_.$router.push({path:"/Pages/Point/ConfPointCardApplyList"});
                    });
                }
            });
        },
        // 7.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 8.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        /*图片预览*/
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        /*图片移除*/
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        back() {
            this.$router.push({path:'/Pages/Point/ConfPointCardApplyList'})
        },
        //==========2.3.1 JavaScript 自定义方法区==========

    },
    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
        this.getDetail();
        this.getPlatFormL();
        this.dateTime();
    },

}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
